<style lang="less">
    @import "less.css";
</style>
<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24" class="">
                        <div class="wl-content-group">
                            <Button class="wl-content-button" type="primary" @click="addAction">新增</Button>
                            <Button type="error">批量删除</Button>
                        </div>
                    </Col>
                    <Col span="24">
                        <Table border stripe ref="selection" :loading="loading" :columns="tableOptions.tableHeader"
                               :data="tableOptions.tableData" @on-selection-change="tableSelectChange" class="wl-table">
                            <template slot="name" slot-scope="{ row }">
                                <p @click="editAction(row)">{{row.name}}</p>
                            </template>
                            <template slot="shangbao" slot-scope="{ row }">
                                <Checkbox :value="row.is_report"></Checkbox>
                            </template>
                        </Table>
                    </Col>
                </Row>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">
                        <Button @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                        <Button @click="handleSelectAll(false)">取消</Button>
                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange"
                              @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
                <Modal v-model="modelFormShow " title="添加企业" :mask-closable="false" :closable="false" width="720">
                    <template>上级单位：（{{treeSelectData.name}}）
                    <Form ref="formLeft" :model="formLeft" :rules="formRulesData" label-position="right"
                          :label-width="80">
                        <Tabs value="basicInformation">
                            <TabPane label="基本信息" name="basicInformation">
                                <Row>
                                    <Col span="12">
                                        <FormItem label="单位名称:" prop="name">
                                            <Input v-model="formLeft.name"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="单位类型:">
                                            <Select clearable placeholder="请选择单位类型">
                                                <Option v-for="item in companyTypeList" :value="item.value"
                                                        :key="item.value">{{ item.label }}
                                                </Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <FormItem label="信用等级:">
                                            <Select clearable placeholder="请选择信用等级">
                                                <Option v-for="item in creditRatingList" :value="item.value"
                                                        :key="item.value">{{ item.label }}
                                                </Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="状态:" prop="status">
                                            <Select v-model="formLeft.status" clearable placeholder="请选择状态">
                                                <Option v-for="item in statusList" :value="item.value"
                                                        :key="item.value">{{ item.label }}
                                                </Option>
                                            </Select>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <FormItem label="联系人:" prop="link_man">
                                            <Input v-model="formLeft.link_man"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="联系电话:" prop="link_phone">
                                            <Input v-model="formLeft.link_phone"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <div class="cascade-choose">
                                            <FormItem label="省/城/区:">
                                                <Cascader :data="cityDatas" v-model="cityValue"
                                                          @on-change="cityOnChange" trigger="hover"></Cascader>
                                            </FormItem>
                                        </div>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <FormItem label="联系地址:" prop="address">
                                            <Input v-model="formLeft.address"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="经营许可证:" prop="bpermit_id" :label-width="90">
                                            <Input v-model="formLeft.bpermit_id"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <FormItem label="核发机关:" prop="bpermit_org">
                                            <Input v-model="formLeft.bpermit_org"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="法定代表人:" prop="corp_resp">
                                            <Input v-model="formLeft.corp_resp"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <FormItem label="证件号码:" prop="corp_resp_id">
                                            <Input v-model="formLeft.corp_resp_id"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="传真号:" prop="corp_fax">
                                            <Input v-model="formLeft.corp_fax"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="12">
                                        <FormItem label="E-mail:" prop="corp_mail">
                                            <Input v-model="formLeft.corp_mail"></Input>
                                        </FormItem>
                                    </Col>
                                    <Col span="12">
                                        <FormItem label="管理手机号:" prop="corp_mobile">
                                            <Input v-model="formLeft.corp_mobile"></Input>
                                        </FormItem>
                                    </Col>
                                </Row>
                                <FormItem label="备注:" prop="note">
                                    <Input v-model="formLeft.note" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                                           placeholder="备注信息"></Input>
                                </FormItem>
                            </TabPane>
                            <TabPane label="设置权限" name="setPermission">
                                <FormItem>
                                    <Tree :data="treeData1"  v-model="treeChoose" @on-check-change="choose" :render="renderContent" show-checkbox multiple></Tree>
                                </FormItem>
                            </TabPane>
                        </Tabs>
                    </Form>
                    </template>
                    <div slot="footer">
                        <Button type="error" @click="modelFormShow=false">取消</Button>
                        <Button @click="handleReset(formLeft)" type="warning" style="margin-left: 8px">重置</Button>
                        <Button type="success" @click="handleSubmit(formLeft)">保存</Button>
                    </div>
                </Modal>
            </template>
        </wl-content-top>
    </div>
</template>
<script>
import WlContentTop from '@/components/wl-content-top'
import { unit } from '@/api/platform'

export default {
  components: {
    WlContentTop
  },
  data () {
    return {
      treeChoose: [],
      dataTree: [],
      cityValue: [],
      formLeft: {
        name: '',
        status: [],
        link_man: '',
        link_phone: '',
        bpermit_id: '',
        bpermit_org: '',
        corp_resp_id: '',
        corp_fax: '',
        corp_mail: '',
        corp_mobile: '',
        address: '',
        corp_resp: '',
        note: '',
        ids: ''
      },
      formRulesData: {
        name: [
          { required: true, message: ' 必填 不能为空', trigger: 'blur' }
        ],
        companyType: [
          { required: true, message: ' 必选 请选择', trigger: 'change' }
        ],
        creditRating: [
          { required: true, message: ' 必选 请选择', trigger: 'change' }
        ],
        status: [
          { required: true, message: ' 必选 请选择', trigger: 'change' }
        ],
        address: [
          { required: true, message: ' 必填 不能为空', trigger: 'blur' }
        ],
        region: [
          { required: true, message: ' 必选 请选择', trigger: 'change' }
        ],
        link_man: [
          { required: true, message: ' 必填 不能为空', trigger: 'blur' }
        ],
        link_phone: [
          { required: true, message: ' 必填 不能为空', trigger: 'blur' }
        ],
        bpermit_id: [
          { required: true, message: ' 必填 不能为空', trigger: 'blur' }
        ]
      },
      companyTypeList: [
        {
          value: '运营商',
          label: '运营商'
        },
        {
          value: '集团用户',
          label: '集团用户'
        },
        {
          value: '车队',
          label: '车队'
        },
        {
          value: '个人用户',
          label: '个人用户'
        },
        {
          value: '车场',
          label: '车场'
        }, {
          value: '保险公司',
          label: '保险公司'
        },
        {
          value: '银行',
          label: '银行'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      creditRatingList: [
        {
          value: 'A',
          label: 'A'
        },
        {
          value: 'AA',
          label: 'AA'
        },
        {
          value: 'AAA',
          label: 'AAA'
        },
        {
          value: 'AAAA',
          label: 'AAAA'
        },
        {
          value: 'B',
          label: 'B'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      statusList: [
        {
          value: '1',
          label: '注册入网'
        },
        {
          value: '2',
          label: '试用'
        },
        {
          value: '3',
          label: '停用'
        },
        {
          value: '4',
          label: '其他'
        }
      ],
      modelFormShow: false,
      tableOptions: {
        tableHeader: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '企业名称',
            slot: 'name'
          },
          {
            title: '管理员手机号',
            key: 'corp_mobile',
            minWidth: 20
          },
          {
            title: '企业邮箱',
            key: 'corp_mail'
          },
          {
            title: '道路运输许可证',
            key: 'bpermit_id',
            minWidth: 30
          }, {
            title: '核发机关',
            key: 'bpermit_org'
          }, {
            title: '联系人',
            key: 'link_man'
          }, {
            title: '联系电话',
            key: 'link_phone'
          }, {
            title: '联系地址',
            key: 'address'
          }, {
            title: '上报政府平台',
            slot: 'shangbao',
            minWidth: 20
          }
        ],
        tableData: []
      },
      searchData: '',
      param: {
        page: 1,
        pid: 1
      },
      loading: false,
      selectData: [],
      pageOptions: {
        totalRecord: 0
      },
      cityDatas: [],
      treeData1: [
        {
          title: '系统管理',
          render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h('Icon', {
                  props: {
                    type: 'ios-folder-outline'
                  },
                  style: {
                    marginRight: '8px'
                  }
                }),
                h('span', data.title)
              ])
            ])
          },
          children: [
            {
              title: '日志管理'
            },
            {
              title: '字典管理'
            },
            {
              title: '用户车辆管理'
            },
            {
              title: '角色权限管理'
            }, {
              title: '用户管理',
              children: [
                {
                  title: '修改用户'
                },
                {
                  title: '添加用户'
                },
                {
                  title: '删除用户'
                }
              ]
            }

          ]
        },
        {
          title: '平台管理',
          render: (h, { root, node, data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%'
              }
            }, [
              h('span', [
                h('Icon', {
                  props: {
                    type: 'ios-folder-outline'
                  },
                  style: {
                    marginRight: '8px'
                  }
                }),
                h('span', data.title)
              ])
            ])
          },
          children: [
            {
              title: '平台设备管理',
              render: (h, { root, node, data }) => {
                return h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%'
                  }
                }, [
                  h('span', [
                    h('Icon', {
                      props: {
                        type: 'ios-folder-outline'
                      },
                      style: {
                        marginRight: '8px'
                      }
                    }),
                    h('span', data.title)
                  ])
                ])
              },
              children: [
                {
                  title: '更改单位'
                }
              ]
            },
            {
              title: '人员管理',
              render: (h, { root, node, data }) => {
                return h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%'
                  }
                }, [
                  h('span', [
                    h('Icon', {
                      props: {
                        type: 'ios-folder-outline'
                      },
                      style: {
                        marginRight: '8px'
                      }
                    }),
                    h('span', data.title)
                  ])
                ])
              },
              children: [
                {
                  title: '更改单位'
                },
                {
                  title: '修改人员信息'
                },
                {
                  title: '删除人员'
                },
                {
                  title: '增加人员'
                }
              ]
            },
            {
              title: '车辆管理',
              render: (h, { root, node, data }) => {
                return h('span', {
                  style: {
                    display: 'inline-block',
                    width: '100%'
                  }
                }, [
                  h('span', [
                    h('Icon', {
                      props: {
                        type: 'ios-folder-outline'
                      },
                      style: {
                        marginRight: '8px'
                      }
                    }),
                    h('span', data.title)
                  ])
                ])
              },
              children: [
                {
                  title: '车辆更改单位'
                },
                {
                  title: '删除'
                },
                {
                  title: '修改'
                },
                {
                  title: '添加'
                }
              ]
            },
            {
              title: '平台企业管理'
            },
            {
              title: '平台资料管理'
            }
          ]
        },
        {
          title: '报表管理'
        },
        {
          title: '录像回放'
        },
        {
          title: '实时视频'
        },
        {
          title: '位置定位'
        }
      ]
    }
  },
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.cityDatas = this.$store.state.app.cityData
    this.getList()
  },
  methods: {
    choose (data) {
      console.log(data, '1234')
      this.treeChoose = data
    },
    renderContent (h, { root, note, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('Icon', {
            props: {
              type: 'ios-paper-outline'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title)
        ])
      ])
    },
    handleSubmit (formLeft) {
      formLeft.ids = this.treeChoose
      formLeft.provience = this.cityValue[0]
      formLeft.city = this.cityValue[1]
      formLeft.section = this.cityValue[2]
      formLeft.pid = this.treeSelectData.id
      unit(formLeft, 'post').then(ret => {
        console.log(formLeft)
        this.tableOptions.tableData = ret.data
        this.getList()
      })
      this.modelFormShow = false
    },
    handleReset (formLeft) {
      this.$refs[formLeft].resetFields()
    },
    getList () {
      this.loading = true
      unit(this.param).then(ret => {
        this.loading = false
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    /* delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      }
      delList.forEach((item, index) => {
        ids.push(item.id)
      })
      this.resultFater({ ids: ids }, 'delete')
    }, */
    addAction () {
      // this.formOptions.formData = JSON.parse(JSON.stringify(this.formData))
      this.modelFormShow = true
      this.formLeft = {
        name: '',
        status: [],
        link_man: '',
        link_phone: '',
        bpermit_id: '',
        bpermit_org: '',
        corp_resp_id: '',
        corp_fax: '',
        corp_mail: '',
        corp_mobile: '',
        address: '',
        corp_resp: '',
        note: '',
        ids: '',
        pid: ''
      }
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    pageSizeChange (e) {
      this.param.page_size = e
      this.param.page = 1
      this.getList()
    },
    cityOnChange (data) {
    }
  },
  watch: {
    treeSelectData (value) {
      console.log(value, '---')
      this.param.pid = value.id
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
    .page {
        height: 100%;
    }

    .wl-content {
        margin-bottom: 10px;

        &-group {
            margin: 10px;
        }

        &-button {
            margin-right: 10px;
        }
    }

    .cascade-choose /deep/ .ivu-input {
        width: 100%;
    }
</style>
